<template>
  <div class="school-info">
    <x-header>完善大学信息</x-header>
    <group class="info" title="基本信息">
      <x-input title="姓名" v-model="form.name" placeholder="请输入姓名"></x-input>
      <x-input title="学号" :max="12" type="number" v-model="form.stuNo" placeholder="请输入学号"></x-input>
      <popup-picker title="大学" :data="universityList" v-model="form.university" placeholder="请选择大学" @on-change="schoolChanged"></popup-picker>
      <popup-picker title="学院" :data="depList" v-model="form.dep" placeholder="请选择学院"></popup-picker>
      <x-input title="专业" v-model="form.major" placeholder="请输入专业"></x-input>
      <!-- <popup-picker title="专业" :data="majorList" v-model="form.major" placeholder="请选择专业"></popup-picker> -->
      <popup-picker title="年级" :data="gradeList" v-model="form.grade" placeholder="请选择年级"></popup-picker>
    </group>
    <group title="上传校园一卡通、学生证">
      <!-- <uploader
        :max="10"
        :images="form.idImgs"
        :handle-click="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage :imglist.sync="form.idImgs"></uploadImage>
    </group>
    <x-button class="submit-btn" type="primary" @click.native="submit">提交</x-button>
    <transition name="bounce">
      <div class="img-enlarge" v-show="imgEnLarge" @click="handleImgEnlarge">
        <img class="img" v-lazy="imgUrl" :src="imgUrl" alt="">
      </div>
    </transition>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { XButton, XInput, XHeader, PopupPicker, Group } from 'vux';
import Avatar from 'vue-avatar';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import { upload } from '../../api/'
const IndexStore = namespace('home');

@Component({
  components: { uploadImage, XButton, XInput, Group, Avatar, XHeader, PopupPicker }
})
export default class SchoolInfo extends Vue {
  @IndexStore.Action getUpdateUserInfo
  @IndexStore.Action getAllSchools
  @IndexStore.State updateUserInfo
  @IndexStore.State schoolArr
  form = {
    university: [],
    dep: [],
    major: '',
    grade: [],
    idImgs: [],
    name: '',
    stuNo: ''
  }
  imgUrl = ''
  imgEnLarge = false
  uploadUrl = upload
  universityList = [['']]
  depList = [['']]
  majorList = [['']]
  gradeList = [['']]
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  submit () {
    let flag = true
    const { university, dep, grade, idImgs, major, stuNo, name } = this.form
    if (idImgs.length === 0) {
      flag = false
      this.$vux.toast.text('上传校园一卡通、学生证', 'middle')
    }
    if (!grade) {
      flag = false
      this.$vux.toast.text('请选择年级', 'middle')
    }
    // if (!major) {
    //   flag = false
    //   this.$vux.toast.text('请选择专业', 'middle')
    // }
    if (!dep) {
      flag = false
      this.$vux.toast.text('请选择院系', 'middle')
    }
    if (!university) {
      flag = false
      this.$vux.toast.text('请选择学校', 'middle')
    }
    if (stuNo === '') {
      flag = false
      this.$vux.toast.text('请选择学号', 'middle')
    }
    if (!name) {
      flag = false
      this.$vux.toast.text('请选择姓名', 'middle')
    }
    if (flag) {
      const { birthday, genderIndex, avatar, nickname } = this.$route.query.personInfo
      const params = {
        nickname: nickname, // 昵称
        avatar: avatar, // 头像
        gender: genderIndex === 0 ? '男' : '女', // 性别
        birthday: birthday, // 出生日期
        mail: '', // edu邮箱
        schoolId: university[0], // 所属学校
        major: major, // 所属专业
        college: dep[0], // 所属学院
        grade: grade[0], // 年级
        sId: stuNo, // 学号
        idImgs: idImgs, // 证件图片
        realName: name // 真实姓名
      }
      this.getUpdateUserInfo(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          localStorage.setItem('loginInfo', JSON.stringify(this.updateUserInfo))
          this.$vux.toast.text('已提交审核', 'middle');
          this.$router.push('/home')
        }
      })
    }
  }
  schoolChanged (data) {
    this.schoolArr.forEach(item => {
      if (item.name === data[0]) {
        this.depList = [[]]
        item.colleges.forEach(k => {
          this.depList[0].push(k)
        })
        this.majorList = [[]]
        item.majors.forEach(kk => {
          this.majorList[0].push(kk)
        })
        this.gradeList = item.grades && [item.grades]
      }
    })
  }
  loginInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  created () {
    if (this.loginInfo) {
      const { schoolId, realName, sId, college, major, grade, idImgs } = this.loginInfo
      this.form = {
        university: [schoolId],
        dep: [college],
        major: major,
        grade: [grade],
        idImgs: idImgs,
        name: realName,
        stuNo: sId
      }
    }
    this.getAllSchools().then(msg => {
      if (msg) {
      } else {
        this.universityList = [[]]
        this.schoolArr.forEach(item => {
          this.universityList[0].push(item.name)
        })
        this.form.university = ['浙江财经大学']
        this.schoolChanged(['浙江财经大学'])
      }
    })
  }
}
</script>
<style lang="less">
  .school-info {
    background: #ffffff;
    height: 100%;
    width: 100%;
    padding-top: 46px;
    .weui-input {
      text-align: right;
      color: #999999;
    }
    .weui-input::-webkit-input-placeholder{color:#999999;}
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .submit-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
</style>
